<template>
    <div>
        <h1 class="tc" style="margin-top: 16px;">{{stepInfo.FormName+'【'+stepInfo.StateRemark+'】'}}</h1>
        <div class="user-info">
            <van-cell :value="userBaseInfo.NewInstallType" title="报装类型："/>
            <van-cell :value="userBaseInfo.ApplyUseWaterType" title="申请报装类型："/>
            <van-cell :value="userBaseInfo.UserName" title="用户姓名："/>
            <van-cell :value="userBaseInfo.UserPhone" title="手机号码："/>
            <van-cell :value="userBaseInfo.UserAddress" title="用户地址："/>
            <van-cell :value="userBaseInfo.UserTel" title="固定电话："/>
            <van-cell :value="userBaseInfo.UserIDCardNo" title="身份证号码："/>
            <van-collapse v-model="moreInfoActive" accordion>
                <van-collapse-item title="更多信息" name="1">
                    <van-cell :value="userBaseInfo.ProposerName" title="经办人姓名："/>
                    <van-cell :value="userBaseInfo.ProposerPhone" title="经办人手机号码："/>
                    <van-cell :value="userBaseInfo.ProposerTel" title="经办人固定电话："/>
                    <van-cell :value="userBaseInfo.ProposerIDCardNo" title="经办人身份证号码："/>
                    <van-cell :value="userBaseInfo.IsBusiness" title="是否有经营："/>
                    <van-cell :value="userBaseInfo.BusinessContent" title="经营项目："/>
                    <van-cell :value="userBaseInfo.TogetherUseWater" title="合表用水："/>
                    <van-cell :value="userBaseInfo.InFloor" title="用水建筑层数："/>
                    <van-cell :value="userBaseInfo.InArea" title="所属区域："/>
                    <van-cell :value="userBaseInfo.UserNature" title="用户性质："/>
                </van-collapse-item>
            </van-collapse>
        </div>
        <!--用户信息-->
        <div class="user-group">
            <van-collapse v-model="userInfoActive" accordion>
                <van-collapse-item title="用户信息" name="1">
                    <div>
                        <template v-if="userInfoList.list.length===0">
                            <span>暂无信息</span>
                        </template>
                        <template v-for="item in userInfoList.list">
                            <van-row>
                                <van-col span="10">
                                    <van-cell :value="item.UserName" :center="true" title="姓名："/>
                                </van-col>
                                <van-col span="14">
                                    <van-cell :value="item.UserPhone" :center="true" title="联系电话："/>
                                </van-col>
                            </van-row>
                            <van-row>
                                <van-col span="24">
                                    <van-cell :value="item.IdCardNo" title="身份证："/>
                                </van-col>
                            </van-row>
                            <van-row>
                                <van-col span="24">
                                    <van-cell :value="item.UserAddress" title="用户地址："/>
                                </van-col>
                            </van-row>
                            <van-row>
                                <van-col span="12">
                                    <van-cell :value="item.UserNature" title="用水性质："/>
                                </van-col>
                                <van-col span="12">
                                    <van-cell :value="item.WaterDeviceNo" title="表号："/>
                                </van-col>
                            </van-row>
                            <van-row>
                                <van-col span="8">
                                    <van-cell :value="item.WaterDeviceDiameter" title="口径："/>
                                </van-col>
                            </van-row>
                        </template>
                    </div>
                </van-collapse-item>
            </van-collapse>
        </div>
        <!--备注-->
        <van-cell-group>
            <van-cell :value="applyTime" title="申请时间："/>
            <van-cell :value="userBaseInfo.CreateBy" title="登记人："/>
            <van-field
                    v-model="remark"
                    rows="2"
                    autosize
                    label="备注："
                    type="textarea"
                    placeholder="请输入备注"
                    class="t-remark"
            />
        </van-cell-group>
        <!--设定审计-->
        <h1 class="tc" style="margin-top: 20px">设定审计-业务表单</h1>
        <van-cell-group>
            <van-cell :value="userBaseInfo.CreateBy" title="设定审计人："/>
            <van-cell :value="applyTime" title="设定审计时间："/>
        </van-cell-group>
        <!--水表信息-->
        <div class="user-group">
            <van-collapse v-model="waterActive" accordion>
                <van-collapse-item title="水表信息" name="1" :border="false">
                    <template v-if="waterInfoList.list.length===0">
                        <span>暂无信息</span>
                    </template>
                    <template v-for="item in waterInfoList.list">
                        <van-row>
                            <van-col span="12">
                                <van-cell :value="item.Specificatiion" :center="true" title="规格："/>
                            </van-col>
                            <van-col span="12">
                                <van-cell :center="true" :value="item.Quantity" title="数量："/>
                            </van-col>
                        </van-row>
                        <van-row>
                            <van-col span="12">
                                <van-cell :value="item.UseWaterNature" title="用水性质："/>
                            </van-col>
                        </van-row>
                        <van-row>
                            <van-col span="12">
                                <van-cell :value="item.SpecificatiionByLeader" title="规格："/>
                            </van-col>
                            <van-col span="12">
                                <van-cell :value="item.QuantityByLeader" title="数量："/>
                            </van-col>
                        </van-row>
                        <van-row>
                            <van-col span="12">
                                <van-cell :value="item.UseWaterNatureByLeader" title="用水性质："/>
                            </van-col>
                        </van-row>
                        <van-row>
                            <van-col span="12">
                                <van-cell :value="item.TakeSpecificatiion" title="数量："/>
                            </van-col>
                            <van-col span="12">
                                <van-cell :value="item.TakeQuantity" title="用水性质："/>
                            </van-col>
                        </van-row>
                    </template>
                </van-collapse-item>
            </van-collapse>
        </div>
        <!--备注-->
        <van-field
                v-model="remark2"
                rows="2"
                autosize
                label="备注："
                type="textarea"
                placeholder="请输入备注"
                class="t-remark"
        />
        <!--        <van-field label="审批图纸">-->
        <!--            <template #input>-->
        <!--                <a href="#">社保卡小.jpg</a>-->
        <!--            </template>-->
        <!--        </van-field>-->
        <!--处理意见-->
        <van-cell-group title="处理意见" :border="false">
            <van-field name="radio" label="审批选项">
                <template #input>
                    <van-radio-group v-model="auditFlag" direction="horizontal">
                        <van-radio name="1">审批通过</van-radio>
                        <van-radio name="2">审批不通过</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field
                    v-model="opinion"
                    rows="2"
                    autosize
                    label="处理意见："
                    type="textarea"
                    placeholder="请输入处理意见"
                    class="t-remark"
            />
        </van-cell-group>
        <van-field input-align="right">
            <template #input>
                <a href="javascript:void(0)" @click="spreadAll">全部展开</a>
            </template>
        </van-field>
        <!--        <van-row>-->
        <!--            <van-col span="24">-->
        <!--                <h2 class="van-doc-demo-block__title">附件信息</h2>-->
        <!--                <van-uploader v-model="fileList" multiple :deletable="false" :show-upload="false"/>-->
        <!--            </van-col>-->
        <!--        </van-row>-->
        <div style="margin: 16px;">
            <van-button round block type="info" @click="submitAudit">
                提交
            </van-button>
        </div>
    </div>
</template>

<script>
    import {
        Row, Col, Icon, Cell,
        CellGroup, Radio, RadioGroup, Field, Button, Uploader, Divider,
        Form, Toast, List, Collapse, CollapseItem, Notify
    } from 'vant'
    import {uploadFile, submitForm} from '@/api/form'
    import {getToken} from '@/utils/auth'
    import {
        getCurrentStepInfo
        , getAllNewInstallBaseInfoById
        , getNewInstallBaseInfoById
        , getNewInstallBaseInfoUserList
        , getNewInstallWaterDeviceDetailInfoList
        , flowAction
        , findFlowApprovers
    } from '@/api/auth-api'
    import {getUserInfo} from '../../api/login'

    export default {
        components: {
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Toast.name]: Toast,
            [Radio.name]: Radio,
            [RadioGroup.name]: RadioGroup,
            [Field.name]: Field,
            [Button.name]: Button,
            [Uploader.name]: Uploader,
            [Form.name]: Form,
            [Divider.name]: Divider,
            [List.name]: List,
            [Collapse.name]: Collapse,
            [CollapseItem.name]: CollapseItem,
            [Notify.name]: Notify
        },
        data() {
            return {
                userBaseInfo: {
                    Id: null,
                    ApplyNewInstallType: null,
                    NewInstallNo: '',
                    NewInstallType: '',
                    HistoryNo: null,
                    UserName: '',
                    UserPhone: '',
                    UserAddress: '',
                    UserTel: null,
                    UserIDCardNo: '',
                    ProposerName: null,
                    ProposerPhone: null,
                    ProposerTel: null,
                    ProposerIDCardNo: null,
                    IsBusiness: '',
                    BusinessContent: null,
                    TogetherUseWater: null,
                    InFloor: null,
                    InArea: '',
                    UserNature: '',
                    UnitName: null,
                    UnitAddress: null,
                    TaxNumber: null,
                    LegalIDCardNo: null,
                    LegalPerson: null,
                    LegalPersonTel: null,
                    UseWaterAddress: null,
                    ApplyUseWaterType: '',
                    UserGuid: '',
                    UserCount: null,
                    DeclareType: null,
                    ProjectName: null,
                    DesignUnit: null,
                    DesignNo: null,
                    DesionPerson: null,
                    ValveDiameter: null,
                    Remark: null,
                    CreateOn: '',
                    CreateUserId: null,
                    CreateBy: '',
                    ModifiedOn: '',
                    ModifiedUserId: null,
                    ModifiedBy: '',
                    IsDel: false
                },
                userInfoList: {
                    list: [],
                    loading: false,
                    finished: true
                },
                waterInfoList: {
                    list: []
                },
                stepInfo: {
                    attachment: []
                    , ApproverValue: []
                    , AppId: ''
                    , ApprovalState: ''
                    , ApproverId: ''
                    , FlowId: ''
                    , StateId: ''
                    , FlowLevel: ''
                    , FlowState: ''
                    , FormName: ''
                    , FormData: ''
                },
                remark: '',
                remark2: '',
                auditFlag: '1',
                opinion: '',
                // 用户信息折叠
                userInfoActive: '',
                // 水表用户信息折叠
                waterActive: '',
                moreInfoActive: '',
                fileList: [
                    // {url: 'https://img.yzcdn.cn/vant/leaf.jpg'},
                    // Uploader 根据文件后缀来判断是否为图片文件
                    // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                    // {url: 'https://cloud-image', isImage: true}
                ],
                userData: {
                    ApprovalId: '',
                    FlowId: '',
                    AppId: '',
                    UserData: {
                        UserId: '',
                        UserName: '',
                        EmployeeId: ''
                    }
                },
                ToNodeApproverJson: ''
            }
        },
        computed: {
            // 申请时间
            applyTime() {
                return this.userBaseInfo.CreateOn ? this.userBaseInfo.CreateOn.replace('T', ' ') : ''
            }
        },
        mounted() {
            const that = this
            // 获取传入的参数

            // userData: {
            //   ApprovalId: 3184,
            //     FlowId: 70,
            //     AppId: 44,
            //     UserData: {
            //     UserId: 343,
            //       UserName: '管理员',
            //       EmployeeId: 343
            //   }
            // }
            // console.log(this.$route.query)
            that.userData.ApprovalId = this.$route.query.approvalId
            that.userData.FlowId = this.$route.query.flowId
            that.userData.AppId = this.$route.query.appId
            that.userData.UserData.UserId = this.$route.query.userId
            that.userData.UserData.EmployeeId = this.$route.query.userId
            that.userData.UserData.UserName = this.$route.query.userName

            if (!that.userData.UserData.UserId || !that.userData.FlowId || !that.userData.AppId || !that.userData.ApprovalId) {
                that.error('参数缺失，请确认网址是否正确')
                return
            }

      getAllNewInstallBaseInfoById(that.userData.AppId).then(response => {
        that.userBaseInfo = Object.assign({}, that.userBaseInfo, response)
        that.userInfoList.list.push(...response.UserList)
        that.waterInfoList.list.push(...response.DeviceList)
      })
      // 获取当前审批信息
      getCurrentStepInfo(that.userData).then(response => {
        if (!response.status) {
          that.error('获取审核信息失败')
          return
        }
        let stepJsonData = response.stepData
        // 默认只能选择第一个
        stepJsonData = JSON.parse(stepJsonData)[0]
        console.log(stepJsonData)
        that.stepInfo = Object.assign({}, that.stepInfo, stepJsonData)
        const attachmentList = JSON.parse(stepJsonData.AttachmentValue)
        // eslint-disable-next-line no-return-assign
        attachmentList.forEach(x => x['file'] = [])
        that.stepInfo.attachment.push(...attachmentList)
      })
    },
    methods: {
      submitAudit() {
        let that = this
        findFlowApprovers(that.userData).then(response => {
          if (!response.status) {
            that.error('获取参与者失败')
            return
          }
          that.ToNodeApproverJson = response.data
        }).then(()=>{
          let submitData = {
            UserData: that.userData.UserData,
            StateId: that.stepInfo.StateId,
            ApprovalId: that.userData.ApprovalId,
            AppId: that.stepInfo.AppId,
            IsPass: that.auditFlag === '1',
            ApprovalOpinion: that.opinion,
            FormName: that.stepInfo.FormName,
            FormData: that.stepInfo.FormData,
            ToNodeApproverJson: that.ToNodeApproverJson,
            ParticipantValue: '',
            Level: 0,
            TurnToDoId: ''
          }
          flowAction(submitData).then(response => {
            this.$router.go(0)
          })
        })
      }
      //全部展开
      , spreadAll() {
        this.userInfoActive = '1'
        this.waterActive = '1'
        this.moreInfoActive = '1'
      }
      ,error(msg){
        Notify({ type: 'danger', message: msg });
      }
    }
  }
</script>

<style lang="less">
    .tc {
        text-align: center;
    }

    h1 {
        margin: 0 0 30px;
        font-size: 18px;
        cursor: default;
    }

    .user-info .van-cell__value {
        flex: 1 auto;
    }

    .user-info [class*='van-hairline']::after {
        border: 0;
    }

    .user-group .van-cell__value {
        text-align: center;
        flex: 1 auto
    }

    .user-group [class*='van-hairline']::after {
        border: 0;
        border-bottom: 0 solid #ebedf0;

    }

    .fr {
        float: right
    }

    .u-radio {
        height: 50px;
    }

    .t-remark textarea {
        border: 1px solid #ccc;
    }

    .van-doc-demo-block__title {
        margin: 0;
        padding: 32px 16px 16px;
        color: rgba(69, 90, 100, 0.6);
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
    }
    .van-cell::after {
        left: 0;
    }
</style>
